<template>
    <div class="post-item">
        <div class="body">
            <div class="header row">
                <div class="avatar">
                    <img :src="item.userInfo.avatarImg" />
                </div>
                <div class="info">
                    <div class="nickname">{{ item.userInfo.nickName }}</div>
                    <div class="time">
                        <span class="left">{{ postTime }}</span>
                        <span>{{ deviceInfo }}</span>
                    </div>
                </div>
                <div
                    v-if="scene === 'default'"
                    :class="{
                        'btn-menu-active': showMenu,
                        'btn-menu': true,
                        icon: true,
                    }"
                    @click="showOperateMenu"
                >
                    <img :src="require(`@/assets/icon/down.png`)" />
                </div>
            </div>

            <div class="content">
                <div class="text">{{ item.content }}</div>
                <div class="media">
                    <ImgPreview :images="item.images" />
                </div>
            </div>

            <PostFooter
                :scene="scene"
                :item="item"
                @click-comment="showComments"
                @click-like="onLikeWeibo"
            />

            <OperateMenu v-model="showMenu" :item="item" v-on="$listeners" />
            <PostCommentPopup v-model="showPopup" :commentId="item.commentId" />
        </div>
    </div>
</template>

<script>
import OperateMenu from "./operateMenu";
import PostFooter from "./footer";
import PostCommentPopup from "./commentPopup";
import ImgPreview from "@/components/common/imgPreview/index";

import { getDateInfo } from "@/utils/date";

export default {
    components: {
        OperateMenu,
        PostFooter,
        PostCommentPopup,
        ImgPreview
    },
    props: {
        item: Object,
        scene: {
            type: String,
            default: "defalut"
        }
    },
    data() {
        return {
            showPopup: false,
            showMenu: false
        };
    },
    computed: {
        postTime() {
            let passedTime = new Date().getTime() - this.item.postTimeStamp;
            let passedMinute = parseInt(passedTime / 1000 / 60);
            let passedHour = passedTime / 1000 / 60 / 60;

            if (passedMinute < 1) {
                return `${parseInt(passedTime / 1000)}秒前`;
            }

            if (passedHour < 1) {
                return `${passedMinute}分钟前`;
            }

            if (passedHour < 24) {
                return `${parseInt(passedHour)}小时前`;
            }

            let t = getDateInfo(this.item.postTimeStamp);
            // console.log(
            //     `已经过去${passedMinute}分钟`,
            //     `已经过去${passedHour}小时`
            // );
            return `${t.monthStr}-${t.dayStr} ${t.hourStr}:${t.minuteStr}`;
        },

        deviceInfo() {
            if (this.item.deviceInfo && this.item.deviceInfo.mobile) {
                return `来自${this.item.deviceInfo.mobile}`;
            }

            return "";
        }
    },

    methods: {
        showComments() {
            this.showPopup = true;
        },

        showOperateMenu() {
            this.showMenu = true;
        },

        onLikeWeibo() {
            this.$cloudApi
                .addUserLiked({
                    data: {
                        type: "weibo",
                        itemId: this.item._id,
                        detail: this.item
                    }
                })
                .then(res => {
                    this.$showToast(res.message || "点赞成功");
                });

            this.$cloudApi.updatePostLikes(this.item._id, {
                ...this.$store.state.userInfo
            });
        }
    }
};
</script>


<style lang="less" scoped>
.post-item {
    background: #fff;
    margin-bottom: 20px;
    padding: 30px 3.5vw 0 3.5vw;
    font-size: 30px;
    color: #4e4e4e;
    .body {
        width: 100%;

        .header {
            align-items: center;
            .avatar {
                width: 70px;
                height: 70px;
                border-radius: 40%;
                overflow: hidden;
            }

            .info {
                flex: 1 1 auto;
                padding: 0 0 0 30px;

                .nickname {
                    font-size: 30px;
                    font-weight: 600;
                    margin-bottom: 5px;
                }

                .time {
                    font-size: 24px;
                    color: #aaa;

                    .left {
                        margin-right: 20px;
                    }
                }
            }

            .btn-menu {
                width: 30px;
                transition: all 0.3s;
            }
            .btn-menu-active {
                transform: rotate(180deg);
            }
        }

        .content {
            padding: 30px 0;

            .text {
                padding: 0 0 10px 0;
            }

            .media {
                margin-top: 10px;
            }
        }
    }
}
</style>